<template>
    <el-switch
        @change="switchDark"
        :active-icon-class="el-icon-sunny"
        :inactive-icon-class="el-icon-moon"
        v-model="themeConfig.isDark"
    />
  </template>
  
  <script>
  import {computed, ref} from "vue";
  import {useSettingStore} from "@/store/modules/setting"

  export default {
    data(){
        const SettingStore = useSettingStore();
        return{
            themeConfig:{
                isDark:false,
            }
        }
    },
    computed: {
        themeConfig() {
        return SettingStore.themeConfig;
        }
    },
    created(){
       this.switchDark();
    },
    methods: {
        switchDark(){
            const body = document.documentElement;
            if (themeConfig.value.isDark) body.setAttribute("class", "dark");
            else body.setAttribute("class", "");
        }
    }
  }
  </script>
  